<%-- 
    Document   : gerente_AdministracionColaboradores
    Created on : Apr 7, 2012, 8:28:01 PM
    Author     : Eol
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerente - Administracion colaboradores</title>
<link href="Estilos/css/bootstrap.css" rel="stylesheet">

<style type="text/css" media="screen">
  #fondo {
            height: 400px;  
            margin: auto;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#f18b01),  to(#ffffff));
        }
</style>
</head>

<body>
	<div id="fondo" class="container" style="width: auto;">
    	<div class="row" style="position:absolute;top:15px;left:200px">
      		<div class="span2">
        		<div class="row">
      				<img src="http://placehold.it/189x93" alt="">
    			</div>
  			</div>
			<div class="span5">
    			<div class="page-header">
					<h1>Nombre del proyecto</h1>
  					<h3>Bienvenido : Nombre</h3>
            		<h4>Gerente</h4>
				</div>  
			</div>
            <div class="span3">
    			<div class="page-header">
                	<div class="btn-group">
						<a class="btn btn-warning">Cambiar contraseña</a>
  						<a href="index.jsp" class="btn btn-info">Salir»</a>
                    </div>
				</div>  
			</div>
        </div>
    </div>
	<div class="subnav" style="position:absolute;top:130px;left:170px">
		<ul class="nav nav-pills">
			<li class=""><a href="gerente_GestionProyecto.jsp">Gestion del Proyecto</a></li>
			<li class="dropdown active"><a href="#">Administracion de colaboradores</a></li>
			<li class=""><a href="gerente_Recursos.jsp">Recursos</a></li>
			<li class=""><a href="#badges">Repores</a></li>
		</ul>
	</div>
	<div id="invitarColaboradores" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
			<a class="close" data-dismiss="modal">×</a>
			<h3>Envia invitaciones a tus colaboradores</h3>
        </div>
        <div class="modal-body">
			<div class="span2 offset1">
				<select multiple="multiple" id="multiSelect">
					<option>colaborador</option>
					<option>colaborador</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
        </div>
        <div class="modal-footer">
			<a href="#" class="btn btn-info" data-dismiss="modal">Cancelar</a>
            <a href="#" class="btn btn-warning">Enviar</a>
        </div>
    </div>
	<div id="asociarCargos" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
			<a class="close" data-dismiss="modal">×</a>
			<h3>Asocia cargos a Colaboradores</h3>
        </div>
        <div class="modal-body">
			<h4>Codigo:</h4>
			<p>
			<h4>Nombre:</h4>
			<br/>
			<div class="row-fluid">
				<div class="span5">
					<h5>Cargos actuales</h5>
					<select multiple="multiple" id="multiSelect">
						<option>colaborador</option>
						<option>colaborador</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select>
				</div>
				<div class="span2">
					<button class="btn btn-warning" style="position:relative;top:30px"><<</button>
					<br/>
					<button class="btn btn-info" style="position:relative;top:40px">Retirar</button>
				</div>
				<div class="span5">
					<form class="well form-inline">
						<h6>Selecciona nuevo cargo</h6>
						<p>
						<label class="checkbox">
							<input type="checkbox">Nuevo cargo
						</label>
						<p>
						<input type="text" class="span2" placeholder="Gerente...">
						<p>
						<label class="checkbox">
							<input type="checkbox">Cargo existente
						</label>
						<p>
						<select class="span2">
							<option>Odontologo</option>
							<option>5</option>
						</select>
					</form>
				</div>
			</div>
        </div>
        <div class="modal-footer">
			<a href="#" class="btn btn-info" data-dismiss="modal">Cerrar</a>
            <a href="#" class="btn btn-warning">Aceptar</a>
        </div>
    </div>
	<div id="verDetalles" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
			<a class="close" data-dismiss="modal">×</a>
			<h3>Detalles del colaborador</h3>
        </div>
        <div class="modal-body">
			<div clas="row-fluid">
				<div class="span2">
				<p>
				<h4>Codigo:</h4>
				<p>
				<h4>Nombre:</h4>
				<p>
				<h4>Apellidos:</h4>
				<p>
				<h5>Cargos:</h5>
				<select multiple="multiple" id="multiSelect">
					<option>colaborador</option>
					<option>colaborador</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
            <a href="#" class="btn btn-warning" name="verDetalles" type="sumit" style="position:relative;top:120px;left:220px">Ver Detalles</a>
			<div class="span3" style="position:relative;top:100px;left:40px">
				<h6>Tarea</h6>
                <table class="table">
				<thead>
					<tr>
						<th>Tarea</th>
						<th>Avance %</th>
						<th>Estado</th>
					</tr>
				</thead>
				<tbody>
				<tr>
					<td>001</td>
					<td>100</td>
					<td>proceso</td>
				</tr>
				<tr>
					<td>435</td>
					<td>20</td>
					<td>Espera</td>
				</tr>
				<tr>
					<td>4325</td>
					<td>Mark</td>
					<td>Iniciada</td>
				</tr>
				</tbody>
			</table>
			</div>
			</div>
		</div>
        <div class="modal-footer">
			<a href="#" class="btn btn-warning" data-dismiss="modal">Cerrar</a>
        </div>
    </div>
	<div id="desvincular" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
              <a class="close" data-dismiss="modal">×</a>
              <h3>Atencion!</h3>
            </div>
            <div class="modal-body">
				<h4>Estas a punto de desvincular un colaborador</h4>
				<p>

				<h4>Colaborador:</h4>
				<p>
			  
				<h4>Nombre:</h4>
			  
				<hr>
	
				<p>Si confirmas esta accion tu colaborador no podra tener tareas, ni mensajes recibir mensajes</p>
				<p>¿Deseas confirmar esta accion?</p>
				<div class="row">
					<img src="http://placehold.it/250x150" alt="" style="position:relative;left:250px">
				</div>
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-info" data-dismiss="modal">Cancelar</a>
              <a href="#" class="btn btn-warning">Continuar</a>
            </div>
    </div>
	<div id="enviarMensaje" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
              <a class="close" data-dismiss="modal">×</a>
            </div>
            <div class="modal-body">
				<div class="span2 offset1">
					<h2>Para:</h2>
					<input class="input" name="para" type="text" data-provide="typeahead">
					<p>
					<h2>Mensaje:</h2>
					<textarea class="input-xlarge" name="mensaje" rows="3"></textarea>
				</div>
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-info" data-dismiss="modal">Cancelar</a>
              <a href="#" class="btn btn-warning">Continuar</a>
            </div>
    </div>
	<div class="btn-group" style="position:absolute;top:180px;left:170px">
		<button data-toggle="modal" class="btn" href="#invitarColaboradores">Inviar Colaboradores</button>
		<button data-toggle="modal" class="btn" href="#asociarCargos">Asociar Cargos</button>
		<button data-toggle="modal" class="btn" href="#verDetalles" >Ver Detalles</button>
		<button data-toggle="modal" class="btn" href="#desvincular">Desvincular</button>
		<button data-toggle="modal" class="btn" href="#enviarMensaje">Enviar Mensaje</button>
		<button class="btn">Mostrar a todos</button>	
	</div>
	<br/>
	
	<div class="row"style="position:absolute;top:240px;left:170px">
		&nbsp
		&nbsp
		&nbsp
		&nbsp
		Parametros de Busqueda:
		<p>
		<div class="span8">
			<form class="well form-inline">
				<a href="#" class="btn btn-warning" name="buscar" type="sumit" style="position:absolute;left:700px">Buscar</a>
				Nombre 
				<input class="input" name="nombre" type="text" data-provide="typeahead">
				Cargo
				<select id="select01">
					<option>something</option>
					<option>2</option>
				</select>
				<p>
				</p>
				Apellido 
				<input class="input" name="apellido" type="text" data-provide="typeahead">
				Activo 
				<input name="activo" type="checkbox">
				<a href="#" class="btn btn-info" name="limpiar" type="sumit" style="position:absolute;left:700px">Limpiar</a>
			</formn>
			<p>
			<table class="table">
			<thead>
				<tr>
					<th>Sel</th>
					<th>ID</th>
					<th>Colaborador</th>
					<th>Cargo</th>
					<th>Correo</th>
					<th>Activo</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
					<td>sg@gmail</td>
					<td>si</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
					<td>sg@gmail</td>
					<td>si</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
					<td>sg@gmail</td>
					<td>si</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
					<td>sg@gmail</td>
					<td>si</td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
	
	
	<script src="Estilos/js/jquery.js"></script>
	<script src="Estilos/js/bootstrap-button.js"></script>
	<script src="Estilos/js/bootstrap-modal.js"></script>
	<script src="Estilos/js/bootstrap-dropdown.js"></script>

</body>
</html>
